<!-- @format -->

<script setup lang="ts">
import { computed } from 'vue'

// 定义组件的props
const props = defineProps({
  size: {
    type: String,
    default: '',
  },
  icon: {
    type: String,
    default: 'share',
  },
  paddingOuter: {
    type: String,
    default: '16rpx',
  },
  padding: {
    type: Boolean,
    default: true,
  },
  bgColor: {
    type: String,
    default: 'gray',
  },
  color: {
    type: String,
    default: 'white',
  },
  title: {
    type: String,
    default: '',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  border: {
    type: Boolean,
    default: true,
  },
})
const emit = defineEmits(['click'])
const styl = computed(() => {
  if (props.disabled) {
    return {
      backgroundColor: '#ccc',
      color: '#999',
    }
  }

  return {
    backgroundColor: props.bgColor,
    color: props.color,
    border: props.border ? '1rpx solid' : 'none',
    padding: props.paddingOuter || '0',
  }
})
</script>

<template>
  <the-icon
    v-if="title || !$slots.default"
    v-bind="props"
    class="the-icon"
    :style="{ ...styl }"
    @click="$emit('click')"
  />
  <the-icon
    v-else
    v-bind="props"
    class="the-icon"
    :style="{ ...styl }"
    @click="$emit('click')"
  >
    <slot></slot>
  </the-icon>
</template>

<style scoped>
.the-icon {
  display: inline-block;
  line-height: 1;

  font-size: 28rpx;
  border-radius: 40rpx;
  background-color: gray;
  color: white;
}
</style>
